<template>
	<div class="sysPageOptionConfigColumn-container">
		<el-card  class="full-table" shadow="hover" style="margin-top: 5px;">
			<el-table :data="tableData" style="width: 100%" v-loading="loading" tooltip-effect="light" row-key="id"
				border="" ref="multipleTableRef" :row-class-name="tableRowClassName" @select="handleSelectionChange"
				:expand-row-keys="expandList" @expand-change="handleExpandChange">
				<el-table-column type="selection" align="center" :selectable="checkTable" />
				<el-table-column type="index" label="序号" width="55" align="center">
					<template #default="scope">
					</template>
				</el-table-column>
				<el-table-column prop="configPath" label="路由路径" width="140" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="label" label="列描述" width="140" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="prop" label="列字段名" width="140" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="width" label="列宽" width="140" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="labelWidth" label="编辑描述宽度" width="140" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="overHidden" label=" 列内容超出隐藏" width="120" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.overHidden" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="display" label="编辑隐藏" width="120" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.display" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="hide" label="隐藏列" width="120" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.hide" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="sortable" label="排序" width="120" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.sortable" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="showColumn" label="参与自定义列显隐" width="120" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.showColumn" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="search" label="是否是搜索框" width="90" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.search" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="cell" label=" 列表中可编辑" width="105" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.cell" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="addDisplay" label="新增时是否显示" width="105" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.addDisplay" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="disabled" label="禁用" width="120" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.disabled" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="editDisplay" label="编辑时是否显示" width="105" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.editDisplay" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="fixed_" label="固定表头" width="120" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.fixed_" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="filterable" label="是否可搜索" width="120" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.filterable" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="viewDisplay" label="详情时是否显示" width="105" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.viewDisplay" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="addDisabled" label="添加的时候不能修改" width="135" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.addDisabled" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="virtualize" label="是否开启虚拟Dom模式" width="165" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.virtualize" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="remote" label="是否为远程搜索" width="105" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.remote" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="editDisabled" label="编辑的时候不能修改" width="135" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.editDisabled" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="showWordLimit" label="显示字数限制" width="90" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.showWordLimit" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="multiple" label="是否多选" width="120" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.multiple" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="searchFilterable" label="select选择框匹配" width="165" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.searchFilterable" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="searchRange" label="是否日期区间" width="90" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.searchRange" type="success"> 是 </el-tag>
						<el-tag type="danger" v-else> 否 </el-tag>

					</template>

				</el-table-column>
				<el-table-column prop="dicUrl" label="数据字典拉取地址" width="120" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="props" label="数据字典" width="120" show-overflow-tooltip="">
					<template #default="scope">
						<a href="javascript:void(0);">{{showKeyValueInfo(scope.row.props)}}</a>

					</template>

				</el-table-column>
				<el-table-column prop="dicData" label="数据字典的值" width="90" show-overflow-tooltip="">
					<template #default="scope">
						<a href="javascript:void(0);">{{showKeyValueInfo(scope.row.dicData)}}</a>

					</template>

				</el-table-column>
				<el-table-column prop="type" label="类型" width="140" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="value" label="默认值" width="140" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="searchLabelWidth" label="搜索框宽度" width="140" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="span" label="编辑/新增表单列数" width="135" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="order" label="位置排序，数字越大位置越靠前" width="210" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="labelTip" label="标题提示语" width="140" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="limit" label="最大允许选择个数" width="120" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="component" label="组件名称" width="140" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="maxlength" label="文本最大输入长度" width="120" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="className" label="修改样式名称" width="90" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="rules" label="提交验证" width="120" show-overflow-tooltip="">
					<template #default="scope">
						<a href="javascript:void(0);">{{showKeyValueInfo(scope.row.rules)}}</a>

					</template>

				</el-table-column>
				<el-table-column label="操作"
					:width="getWidthByAuths(['sysPageOptionConfigColumn:save','sysPageOptionConfigColumn:edit','sysPageOptionConfigColumn:delete'])"
					align="center" fixed="right" show-overflow-tooltip=""
					v-if="auths(['sysPageOptionConfigColumn:save','sysPageOptionConfigColumn:edit','sysPageOptionConfigColumn:delete'])">
					<template #default="scope">
						<el-button type="warning" icon="ele-CircleCheckFilled" @click="saveData(scope.row)"
							v-auth="'sysPageOptionConfigColumn:save'">保存</el-button>
						<el-button type="warning" icon="ele-Edit" @click="openEditSysPageOptionConfigColumn(scope.row)"
							v-auth="'sysPageOptionConfigColumn:edit'">编辑</el-button>
						<el-button type="primary" icon="ele-Delete" @click="delSysPageOptionConfigColumn(scope.row)"
							v-auth="'sysPageOptionConfigColumn:delete'">删除</el-button>

					</template>
				</el-table-column>
			</el-table>
			<el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
				:total="tableParams.total" :page-sizes="[10, 20, 50, 100, 200]" small="" background=""
				@size-change="handleSizeChange" @current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper" />
			<editDialog ref="editDialogRef" :title="editSysPageOptionConfigColumnTitle" @reloadTable="handleQuery" />
		</el-card>

		<el-dialog v-model="state.dialogUploadVisible" :lock-scroll="false" draggable width="400px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle">
						<ele-UploadFilled /> </el-icon>
					<span> 上传文件 </span>
				</div>
			</template>
			<div>
				<el-upload ref="uploadRef" drag :auto-upload="false" :limit="1" :file-list="state.fileList" action=""
					:on-change="handleChange" accept=".xls,.xlsx">
					<el-icon class="el-icon--upload">
						<ele-UploadFilled />
					</el-icon>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					<template #tip>
						<div class="el-upload__tip">请上传大小不超过 10MB 的文件</div>
					</template>
				</el-upload>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.dialogUploadVisible = false">取消</el-button>
					<el-button type="primary" @click="uploadFile">确定</el-button>
				</span>
			</template>
		</el-dialog>

		<el-dialog v-model="state.dialogInfoVisible" draggable width="1000px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle">
						<ele-Document /> </el-icon>
					<span>详情</span>
				</div>
			</template>
			<json-viewer :value="JSON.parse(state.dialogInfoContent)" :expand-depth="8" copyable boxed
				sort></json-viewer>
		</el-dialog>

	</div>
</template>

<script lang="ts" setup="" name="sysPageOptionConfigColumn">
	import { ref, reactive, onMounted } from "vue";
	import { useRoute } from 'vue-router';
	import { ElMessageBox, ElMessage, UploadInstance } from "element-plus";
	import _ from 'lodash';
	import { auth, getWidthByAuths, auths } from '/@/utils/authFunction';
	import { downloadByData, getFileName } from '/@/utils/download';
	//import { formatDate } from '/@/utils/formatTime';

	import editDialog from '/@/views/main/sysPageOptionConfigColumn/component/editDialog.vue'

	import { pageSysPageOptionConfigColumn, saveSysPageOptionConfigColumn, deleteSysPageOptionConfigColumn, exportSysPageOptionConfigColumnExcel } from '/@/api/main/sysPageOptionConfigColumn';
	import { SysFile } from '/@/api-services/models';
	import request from '/@/utils/request';
	const uploadRef = ref<UploadInstance>();
	const state = reactive({
		loading: false,
		fileData: [] as Array<SysFile>,
		queryParams: {
			fileName: undefined,
			startTime: undefined,
			endTime: undefined,
		},
		tableParams: {
			page: 1,
			pageSize: 10,
			total: 0 as any,
		},
		dialogUploadVisible: false,
		dialogPdfVisible: false,
		dialogInfoVisible: false,
		dialogInfoContent: '',
		fileList: [] as any,
		pdfUrl: '',
	});
	const timer = ref<any>();
	const expandList = ref<any>([]);
	const editDialogRef = ref();
	const loading = ref(false);
	const tableData = ref<any>([]);
	const multipleTableRef = ref<InstanceType<typeof ElTable>>();
	const multipleSelection = ref<any>([]);
	const toggleSelection = (rows ?: []) => {
		multipleTableRef.value.clearSelection()
	}
	const queryParams = ref<any>({});
	const tableParams = ref({
		page: 1,
		pageSize: 10,
		total: 0,
		frontPath: null
	});
	const editSysPageOptionConfigColumnTitle = ref("");

	var props = defineProps({
		info: {
			default: {},
		},
	});
	// 页面加载时
	onMounted(async () => {
		const route = useRoute();
		tableParams.value.frontPath = route.path;
		handleQuery();
	});
	// 勾选框是否禁用

	const checkTable = (row, index) => {
		if (row.id) {
			return true; //不禁用
		}
		return false; //禁用
	};

	//行颜色
	const tableRowClassName = (every) => {
	}

	// 打开上传页面
	const openUploadDialog = () => {
		state.fileList = [];
		state.dialogUploadVisible = true;
	};

	// 通过onChanne方法获得文件列表
	const handleChange = (file : any, fileList : []) => {
		state.fileList = fileList;
	};

	//保存行编辑的数据
	const saveData = _.debounce(async function (row) {
		await saveSysPageOptionConfigColumn(row);
		await handleQuery();
	}, 1000);


	// 查看详情
	const viewDetail = _.throttle(async (row : any, tableName : string, id : number) => {
		var url = `api/sysPageOptionConfigColumn/Info/${tableName}/${id}`
		var res = await request({ url: url, method: 'get' });
		state.dialogInfoContent = res.data.result;
		state.dialogInfoVisible = true;
	}, 1000);

	// 上传
	const uploadFile = async () => {
		if (state.fileList.length < 1) return;
		var url = `api/sysPageOptionConfigColumn/Import`

		var formData = new window.FormData();
		formData.append('file', state.fileList[0].raw);
		var res = await request(
			{
				url: url,
				method: 'post',
				data: formData,
				headers: { 'Content-Type': 'multipart/form-data' }
			}
		)
		ElMessage.success('上传成功');
		await handleQuery();
		state.dialogUploadVisible = false;
	};

	//导出
	const exportSysPageOptionConfigColumn = async () => {
		var res = await exportSysPageOptionConfigColumnExcel(queryParams.value);
		var fileName = getFileName(res.headers);
		downloadByData(res.data as any, fileName);
	};

	//下载模板
	const downLoadTemplate = async () => {
		var url = `api/sysPageOptionConfigColumn/TemplateDown`
		var res = await request({
			url: url,
			method: 'get',
			responseType: 'blob'
		});
		var fileName = getFileName(res.headers);
		downloadByData(res.data as any, fileName);
	}

	// 查询操作
	const handleQuery = async () => {
		timer.value = new Date().getTime();
		loading.value = true;
		if (props.info.id > 0) {
			queryParams.value.configPath = props.info.configPath; //展开行对应的id赋值
		}
		var res = await pageSysPageOptionConfigColumn(Object.assign(queryParams.value, tableParams.value));
		tableData.value = res.data.result?.items ?? [];
		tableParams.value.total = res.data.result?.total;
		loading.value = false;
	};

	// 打开新增页面
	const openAddSysPageOptionConfigColumn = () => {
		editSysPageOptionConfigColumnTitle.value = '添加页面配置明细';
		editDialogRef.value.openDialog({});
	};

	// 打开编辑页面
	const openEditSysPageOptionConfigColumn = (row : any) => {
		editSysPageOptionConfigColumnTitle.value = '编辑页面配置明细';
		editDialogRef.value.openDialog(row);
	};


	const showKeyValueInfo = (list) => {
		if (list != null && list.length > 0) {
			if (list[0].label != undefined) {
				return list.map(r => r.label)
			}
		}
		return list;
	}


	const handleExpandChange = (row : any, expandedRows : any) => {
		timer.value = new Date().getTime();
		if (expandedRows.length) {
			expandList.value = [];
			if (row) {
				expandList.value.push(row.id);
			}
		} else {
			expandList.value = [];
		}
	};

	// 删除
	const delSysPageOptionConfigColumn = (row : any) => {
		ElMessageBox.confirm(`确定要删除吗?`, "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		})
			.then(async () => {
				await deleteSysPageOptionConfigColumn(row);
				handleQuery();
				ElMessage.success("删除成功");
			})
			.catch(() => { });
	};

	// 改变页面容量
	const handleSizeChange = (val : number) => {
		tableParams.value.pageSize = val;
		handleQuery();
	};

	// 改变页码序号
	const handleCurrentChange = (val : number) => {
		tableParams.value.page = val;
		handleQuery();
	};


	const handleSelectionChange = (val : any) => {
		multipleSelection.value = val
	}
</script>
<style>
	
</style>